<template>
  <div class="registration-page">
    <div class="form-container">
      <h1 class="text-center text-2x1 mb-6" style="margin-left:140px;margin-top: -15px;">用户注册</h1>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="用户名" prop="username">
          <el-input placeholder="请输入用户名" v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input placeholder="请输入密码" v-model="form.password" show-password type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input placeholder="请再次输入密码" v-model="form.confirmPassword" show-password type="password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input placeholder="请输入邮箱" v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item class="flex justify-center space-x-4">
          <el-button type="success" @click="handleSubmit">
            <el-icon><UserFilled /></el-icon>
            注册
          </el-button>
          <el-button type="primary" @click="handleLoginClick">
            <el-icon><Tools /></el-icon>
            登录
          </el-button>
          <el-button @click="handleReset">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <div class="selector-container flex justify-center mt-6">
        <el-radio-group style="margin-left: 30%;" v-model="selectedOption" @change="handleOptionChange">
          <el-radio label="page1">用户</el-radio>
          <el-radio label="page2">管理员</el-radio>
        </el-radio-group>
      </div>
    </div>
  </div>
</template>
<script setup>
import { UserFilled,Tools,Refresh, } from '@element-plus/icons-vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElForm, ElFormItem, ElInput, ElButton, ElRadioGroup} from 'element-plus';
import axios from 'axios';
const router = useRouter();
const selectedOption = ref('');
const handleOptionChange = (value) => {
  if (value === 'page1') {
    router.push('/ReGister');
  } else if (value === 'page2') {
    router.push('/GuanLogin');
  }
};
const formRef = ref(null);
const form = ref({
  username: '',
  password: '',
  confirmPassword: '',
  email: ''
});
const rules = ref({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符之间', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少为 6 个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== form.value.password) {
          callback(new Error('两次输入的密码不一致'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
  ]
});

const handleSubmit = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const response = await axios.post('http://localhost:8090/user/registry', {
          username: form.value.username,
          password: form.value.password,
          email: form.value.email
        });
        console.log("data=",response);
        if (response.data.code==200) {
          console.log("data",response);
          alert('注册成功');
          console.log('表单数据:', form.value);
          router.push({ path: '/login' });
        } else {
          alert('注册失败，请稍后再试');
        }
      } catch (error) {
        console.error('注册失败:', error);
        alert('注册失败，请检查网络或联系管理员');
      }
    } else {
      console.log('表单验证失败');
      return false;
    }
  });
};
const handleReset = () => {
  formRef.value.resetFields();
};

const handleLoginClick = () => {
  router.push({ path: '/login' });
};
</script>

<style>
/* 定义动画 */
@keyframes borderAnim {
  0% { border-color: rgba(213, 143, 155, 0.982); }
  25% { border-color: rgba(245, 245, 191, 0.957); }
  50% { border-color: rgba(203, 203, 255, 0.959); }
  75% { border-color: rgba(196, 251, 196, 0.92); }
  100% { border-color: rgb(165, 211, 229); }
}

.el-input__wrapper {
  border-radius: 30px !important;
}

.registration-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background-image: url('@/assets/背景.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.form-container {
  border: 2px solid pink;
  animation: borderAnim 4s infinite;
  padding: 2rem;
  box-shadow: 0 5px 7px rgba(225, 228, 228, 0.852);
  width: min(90%, 400px);
  background-color: rgb(230, 240, 250);
  margin-left: 40%;
  border-radius: 20px;
}
</style>  